<extend name="Public/base" />
<block name="content">
    <div style="margin-top:2%;padding-left:35%">
        <button onclick="add()" class="button tiny addPointroless">添加菜单</button>&nbsp;&nbsp;&nbsp;
        <button onclick="unSelect()" class="button tiny">反选</button>&nbsp;&nbsp;&nbsp;
        <button onclick="delLot()" class="button tiny">删除(批量)</button>
    </div>
    <table id="pointroleTbl" style="margin-left: 10%">
        <thead >
            <th><input  onclick="selectAll(this)" type="checkbox"></th>
            <th style="text-align: center;width:4rem">编号</th>
            <th style="text-align: center;width:12rem">名称</th>
            <th style="text-align: center;width:12rem">分值</th>
            <th style="text-align: center;width:12rem">描述</th>
            <th style="text-align: center;width:6rem">锁定</th>
            <th style="text-align: center;width:8rem"> 操作</th>
        </thead>
        <tbody id="tbodys">
        <volist name="navs" id="nav">
            <tr id="row_<{$nav.points_roles_id}>">
                <td><input class="slct" type="checkbox" value="<{$nav.points_roles_id}>"></td>
                <td><{$nav.points_roles_id}></td>
                <td><input name="role_name" style="height:25px" class="es" disabled type="text" value="<{$nav.role_name}>"></td>
                <td><input name="val" style="height:25px" class="es" disabled type="text" value="<{$nav.val}>"></td>
                <td><input name="desc" style="height:25px" class="es" disabled style="width:4em;" type="text" value="<{$nav.desc}>" onfocus="texty(this)"></td>
                <td>
                    <div class="switch tiny round">
                        <input onclick="lock(this)" value="<{$nav.points_roles_id}>" id="lock_<{$nav.points_roles_id}>" type="checkbox"  <{$nav['lock']?'checked':''}>>
                        <label for="lock_<{$nav.points_roles_id}>"></label>
                    </div>
                </td>
                <td>
                    <button onclick="edit('row_<{$nav.points_roles_id}>')" class="button tiny edit radius" style="height:25px;line-height:6px">编辑</button>
                    <button onclick="save('<{$nav.points_roles_id}>')" style="display: none;height:25px;line-height:6px" class="button tiny save radius">保存</button>
                </td>
            </tr>
        </volist>
        </tbody>
    </table>
    <div id="page"  style="text-align:center">
        <for start="1" end="$pages+1" >
            <span data-val="<{$i}>" style="cursor:pointer"><{$i}>&nbsp;&nbsp;</span>
        </for>
    </div>
    <script>
        //全选
        function selectAll(obj) {
            $('#pointroleTbl tbody .slct').prop('checked',$(obj).prop('checked'));
        }
        //反选
        function unSelect() {
            $('#pointroleTbl tbody .slct').map(function(){
                $(this).prop('checked',!$(this).prop('checked'));
            });
        }
        //批量删除
        function delLot() {
           if($('#pointroleTbl tbody .slct:checked')['length']){
            if(confirm('确定删除吗?')){
            var ids = $('#pointroleTbl tbody .slct:checked').map(function () {
                $(this).parent().parent().remove();
                return $(this).val();
            });
            ids  = ids.get().join();
            $.post('<{:U("doDelPointrole")}>',{ids:ids},function (data) {
                alert(data.msg);
            });
        }}}
        //锁定
        function lock(obj) {
            var id = $(obj).val();
            var lockval = $(obj).prop('checked')?1:0;
            var mtimes=new Date().getTime();
            $.post('<{:U("doEditPointrole")}>',{points_roles_id:id,lock:lockval,mtime:mtimes});
        }
        //修改
        function edit(rowid) {
            $('#'+rowid+' .es').prop('disabled',false);
            $('#'+rowid+' .edit').hide();
            $('#'+rowid+' .save').show();
        }
        //修改保存
        function save(id) {
            $('#row_'+id+' .es').prop('disabled',true);
            $('#row_'+id+' .edit').show();
            $('#row_'+id+' .save').hide();
            var data = {
               points_roles_id:id,
                role_name:$('#row_'+id+' [name=role_name]').val(),
                val:  $('#row_'+id+' [name=val]').val(),
                desc :  $('#row_'+id+' [name=desc]').val(),
            }
            $.post('<{:U("doEditPointrole")}>',data,function (data) {
                if(data.error!==0){
                    alert(data.msg);
                }
            });
        }
        //添加
        function add(){
            newRows="<tr id='addsss'>"
                            +"<td></td>"
                            +"<td></td>"
                            +"<td><input class='role_nameAdd' style='height:25px' class='es' type='text'></td>"
                            +"<td><input class='valAdd' style='height:25px' class='es' type='text'></td>"
                            +"<td class='descAdd'><input name='desc' style='height:25px'  style='width:4em;' type='text' onfocus='texty(this)' onblur='textk(this)'></td>"
                            +"<td>"
                            +" <div class='switch tiny round ' >"
                            +"<input  id='locks' type='checkbox'  class='lockAdd'>"
                            +"<label for='locks'></label>"
                            +"</div>"
                            +"</td>"
                            +"<td>"
                            +"<button onclick='addPointroles()' class='button tiny edit radius' style='height:25px;line-height:6px'>添加</button><br />"
                            +"<button onclick='canelAddPointroles()' class='button tiny edit radius' style='height:25px;line-height:6px'>取消</button>"
                            +"</td>"
                            +"</tr>"
            ;
            $("#pointroleTbl").append(newRows);
            $('.addPointroless').hide();
        }
        function canelAddPointroles(){
            $('#addsss').remove();
            $('.addPointroles').show();
        }
        function addPointroles(){
            var data = {
                role_name:$('.role_nameAdd').val(),
                val:  $('.valAdd').val(),
                desc :  $('.descAdd input').val(),
                lock:$('.lockAdd').prop('checked')?1:0,
            }
            $.post('<{:U("doAddPointrole")}>',data,function (data) {
                if(data.error!==0){
                    alert(data.msg);
                }
            });
            $('#addsss').remove();
            $('.addPointroless').show();
        }
        //分页
        $('#page span').click( function () {
            var pagenum = $(this).attr('data-val');
            $.get('<{:U("getShow")}>',{p:pagenum},function (data) {
                var html='';
                for(var i in data){
                    xy=data[i]['lock']?'checked>':'>';
                    html +='<tr id="row_'+data[i].points_roles_id+'">'
                            +'<td><input class="slct" type="checkbox" value="'+data[i].points_roles_id+'"></td>'
                            +'<td>'+data[i].points_roles_id+'</td>'
                            +'<td>'
                            +'<input name="role_name" style="height:25px" class="es" disabled type="text" value="'+data[i].role_name+'">'
                            +'</td>'
                            +'<td>'
                            +'<input name="val" style="height:25px" class="es" disabled type="text" value="'+data[i].val+'">'
                            +'</td>'
                            +'<td>'
                            +'<input name="desc" style="height:25px" class="es" disabled style="width:4em;" type="text" value="'+data[i].desc+'" onfocus="texty(this)">'
                            +'</td>'
                            +'<td>'
                            +'<div class="switch tiny round">'
                            +'<input onclick="lock(this)" value="'+data[i].points_roles_id+'" id="lock_'+data[i].points_roles_id+'" type="checkbox"  '+xy
                            +'<label for="lock_'+data[i].points_roles_id+'"></label>'
                            +'</div>'
                            +'</td>'
                            +'<td>'
                            +'<button onclick="edit('+"'row_"+data[i].points_roles_id+"'"+')" class="button tiny edit radius" style="height:25px;line-height:6px">编辑</button>'
                            +'<button onclick="save('+"'"+data[i].points_roles_id+"'"+')" style="display: none;height:25px;line-height:6px" class="button tiny save radius">保存</button>'
                            +'</td>'
                            +'</tr>'

                    ;
                }
                $('#pointroleTbl #tbodys').html(html);
            });
        } );
        //焦点事件
        function texty(a){
            var valuek=$(a).val();
            var htmly='<textarea name="desc" onblur="textk(this)">'+valuek+'</textarea>';
             $(a).parent().html(htmly)
        }
        function textk(a){
            var valuey=$(a).val();
            var htmlk='<input name="desc" value="'+valuey+'" class="es" style="height:25px" style="width:4em;" type="text" onfocus="texty(this)">';
            $(a).parent().html(htmlk);
        }
    </script>
</block>